<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>订单管理系统</title>
    <!-- 引入Vue 3 -->
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <!-- 引入Axios用于HTTP请求 -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!-- 引入CSS样式 -->
    <link rel="stylesheet" href="css/style.css">
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f5f5f5;
        }
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }
        .header {
            background-color: #3f51b5;
            color: white;
            padding: 15px 20px;
            margin-bottom: 20px;
            border-radius: 4px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .header h1 {
            margin: 0;
            font-size: 24px;
        }
        .header button {
            background-color: #ff4081;
            color: white;
            border: none;
            padding: 8px 16px;
            border-radius: 4px;
            cursor: pointer;
        }
        .header button:hover {
            background-color: #f50057;
        }
        .search-container {
            background-color: white;
            padding: 20px;
            border-radius: 4px;
            margin-bottom: 20px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }
        .search-form {
            display: flex;
            gap: 15px;
            align-items: flex-end;
            flex-wrap: wrap;
        }
        .form-group {
            flex: 1;
            min-width: 200px;
        }
        .form-group label {
            display: block;
            margin-bottom: 5px;
            font-weight: 500;
        }
        .form-group input {
            width: 100%;
            padding: 8px 12px;
            border: 1px solid #ddd;
            border-radius: 4px;
            box-sizing: border-box;
        }
        .search-button {
            background-color: #4caf50;
            color: white;
            border: none;
            padding: 8px 24px;
            border-radius: 4px;
            cursor: pointer;
            height: 36px;
        }
        .search-button:hover {
            background-color: #45a049;
        }
        .content-container {
            background-color: white;
            padding: 20px;
            border-radius: 4px;
            margin-bottom: 20px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }
        .section-title {
            font-size: 18px;
            font-weight: 500;
            margin-bottom: 15px;
            padding-bottom: 10px;
            border-bottom: 1px solid #eee;
        }
        .order-info {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 15px;
        }
        .info-item {
            display: flex;
            flex-direction: column;
        }
        .info-label {
            font-size: 14px;
            color: #666;
            margin-bottom: 3px;
        }
        .info-value {
            font-size: 16px;
            font-weight: 500;
        }
        .config-section {
            margin-top: 30px;
        }
        .config-table {
            width: 100%;
            border-collapse: collapse;
        }
        .config-table th,
        .config-table td {
            padding: 12px;
            text-align: left;
            border-bottom: 1px solid #eee;
        }
        .config-table th {
            background-color: #f9f9f9;
            font-weight: 500;
        }
        .config-table tr:hover {
            background-color: #f5f5f5;
        }
        .config-value {
            word-break: break-all;
        }
        .masked-value {
            color: #999;
        }
        .logs-section {
            margin-top: 30px;
        }
        .logs-list {
            border-left: 3px solid #3f51b5;
            padding-left: 20px;
        }
        .log-item {
            margin-bottom: 15px;
            position: relative;
        }
        .log-item:before {
            content: '';
            position: absolute;
            left: -24px;
            top: 5px;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background-color: #3f51b5;
        }
        .log-time {
            font-size: 14px;
            color: #666;
            margin-bottom: 3px;
        }
        .log-content {
            font-size: 15px;
            line-height: 1.5;
        }
        .action-buttons {
            margin-top: 20px;
            display: flex;
            gap: 10px;
        }
        .btn-primary {
            background-color: #2196f3;
            color: white;
            border: none;
            padding: 8px 16px;
            border-radius: 4px;
            cursor: pointer;
        }
        .btn-primary:hover {
            background-color: #0b7dda;
        }
        .btn-secondary {
            background-color: #f5f5f5;
            color: #333;
            border: 1px solid #ddd;
            padding: 8px 16px;
            border-radius: 4px;
            cursor: pointer;
        }
        .btn-secondary:hover {
            background-color: #e0e0e0;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="header">
            <h1>订单管理系统</h1>
            <div>
                <span>欢迎，{{ username }}</span>
                <button @click="logout">退出登录</button>
            </div>
        </div>
        
        <div class="container">
            <!-- 搜索区域 -->
            <div class="search-container">
                <h2 class="section-title">订单查询</h2>
                <div class="search-form">
                    <div class="form-group">
                        <label for="orderNo">订单号</label>
                        <input type="text" id="orderNo" v-model="searchOrderNo" placeholder="请输入订单号">
                    </div>
                    <div class="form-group">
                        <label for="trackingNo">运单号</label>
                        <input type="text" id="trackingNo" v-model="searchTrackingNo" placeholder="请输入运单号">
                    </div>
                    <div class="form-group">
                        <label for="customerName">收货人</label>
                        <input type="text" id="customerName" v-model="searchCustomerName" placeholder="请输入收货人姓名">
                    </div>
                    <button class="search-button" @click="searchOrders">查询</button>
                </div>
            </div>
            
            <!-- 订单详情区域 -->
            <div class="content-container" v-if="order">
                <h2 class="section-title">订单信息</h2>
                <div class="order-info">
                    <div class="info-item">
                        <span class="info-label">订单ID</span>
                        <span class="info-value">{{ order.orderId }}</span>
                    </div>
                    <div class="info-item">
                        <span class="info-label">订单状态</span>
                        <span class="info-value">{{ order.orderStatus }}</span>
                    </div>
                    <div class="info-item">
                        <span class="info-label">订单号</span>
                        <span class="info-value">{{ order.orderNo }}</span>
                    </div>
                    <div class="info-item">
                        <span class="info-label">运单号</span>
                        <span class="info-value">{{ order.trackingNo }}</span>
                    </div>
                    <div class="info-item">
                        <span class="info-label">创建时间</span>
                        <span class="info-value">{{ formatDate(order.createTime) }}</span>
                    </div>
                    <div class="info-item">
                        <span class="info-label">收货人</span>
                        <span class="info-value">{{ order.customerName }}</span>
                    </div>
                    <div class="info-item">
                        <span class="info-label">联系电话</span>
                        <span class="info-value">{{ order.contactNumber }}</span>
                    </div>
                    <div class="info-item">
                        <span class="info-label">特殊备注</span>
                        <span class="info-value">{{ order.specialRemarks }}</span>
                    </div>
                    <div class="info-item">
                        <span class="info-label">订单类型</span>
                        <span class="info-value">{{ order.orderType }}</span>
                    </div>
                    <div class="info-item">
                        <span class="info-label">平台</span>
                        <span class="info-value">{{ order.platform }}</span>
                    </div>
                    <div class="info-item">
                        <span class="info-label">平台订单号</span>
                        <span class="info-value">{{ order.platformOrderNo }}</span>
                    </div>
                    <div class="info-item">
                        <span class="info-label">数量</span>
                        <span class="info-value">{{ order.quantity }}</span>
                    </div>
                    <div class="info-item">
                        <span class="info-label">商品名称</span>
                        <span class="info-value">{{ order.productName }}</span>
                    </div>
                    <div class="info-item">
                        <span class="info-label">重量</span>
                        <span class="info-value">{{ order.weight }} {{ order.unit }}</span>
                    </div>
                    <div class="info-item">
                        <span class="info-label">特殊商品</span>
                        <span class="info-value">{{ order.specialProduct }}</span>
                    </div>
                    <div class="info-item">
                        <span class="info-label">物流单号</span>
                        <span class="info-value">{{ order.logisticsNoteNo }}</span>
                    </div>
                    <div class="info-item">
                        <span class="info-label">物流公司</span>
                        <span class="info-value">{{ order.logisticsCompany }}</span>
                    </div>
                </div>
                
                <div class="action-buttons">
                    <button class="btn-primary" @click="updateOrderStatus">更新订单状态</button>
                    <button class="btn-secondary" @click="refreshOrder">刷新</button>
                </div>
            </div>
            
            <!-- API配置区域 -->
            <div class="content-container">
                <h2 class="section-title">API配置</h2>
                <table class="config-table">
                    <thead>
                        <tr>
                            <th>Key</th>
                            <th>Value</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="config in apiConfigs" :key="config.key">
                            <td>{{ config.key }}</td>
                            <td>
                                <span v-if="!config.sensitive" class="config-value">{{ config.value }}</span>
                                <span v-else class="masked-value">******** (敏感信息已隐藏)</span>
                            </td>
                            <td>
                                <button class="btn-secondary" @click="editConfig(config)">编辑</button>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            
            <!-- 订单操作日志区域 -->
            <div class="content-container" v-if="orderLogs.length > 0">
                <h2 class="section-title">订单操作日志</h2>
                <div class="logs-list">
                    <div class="log-item" v-for="log in orderLogs" :key="log.operationTime + log.operator">
                        <div class="log-time">{{ formatDate(log.operationTime) }} - {{ log.operator }}</div>
                        <div class="log-content">{{ log.operationContent }}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 引入Vue应用 -->
    <script>
        // Vue 3 应用
        const { createApp } = Vue;
        
        const app = createApp({
            data() {
                return {
                    username: '',
                    searchOrderNo: '',
                    searchTrackingNo: '',
                    searchCustomerName: '',
                    order: null,
                    orderLogs: [],
                    apiConfigs: []
                }
            },
            mounted() {
                // 获取当前登录用户信息
                this.loadUserData();
                // 加载API配置
                this.loadApiConfigs();
                // 默认加载订单示例
                this.loadOrderExample();
            },
            methods: {
                loadUserData() {
                    // 在实际应用中，应该从后端获取当前登录用户信息
                    this.username = "管理员";
                },
                
                searchOrders() {
                    axios.get('/api/orders', {
                        params: {
                            orderNo: this.searchOrderNo,
                            trackingNo: this.searchTrackingNo,
                            customerName: this.searchCustomerName
                        }
                    })
                    .then(response => {
                        const orders = response.data.data;
                        if (orders && orders.length > 0) {
                            this.order = orders[0];
                            this.loadOrderLogs(this.order.orderId);
                        } else {
                            alert('未找到匹配的订单');
                        }
                    })
                    .catch(error => {
                        console.error('查询订单失败:', error);
                        alert('查询订单失败，请重试');
                    });
                },
                
                loadOrderExample() {
                    // 加载示例订单
                    axios.get('/api/orders/665146')
                    .then(response => {
                        this.order = response.data.data;
                        this.loadOrderLogs(this.order.orderId);
                    })
                    .catch(error => {
                        console.error('加载示例订单失败:', error);
                    });
                },
                
                loadOrderLogs(orderId) {
                    axios.get(`/api/orders/${orderId}/logs`)
                    .then(response => {
                        this.orderLogs = response.data.data || [];
                    })
                    .catch(error => {
                        console.error('加载订单日志失败:', error);
                    });
                },
                
                loadApiConfigs() {
                    axios.get('/api/configs')
                    .then(response => {
                        this.apiConfigs = response.data.data || [];
                    })
                    .catch(error => {
                        console.error('加载API配置失败:', error);
                    });
                },
                
                updateOrderStatus() {
                    if (!this.order) return;
                    
                    const newStatus = prompt('请输入新的订单状态:', this.order.orderStatus);
                    if (newStatus && newStatus !== this.order.orderStatus) {
                        axios.put(`/api/orders/${this.order.orderId}/status`, newStatus)
                        .then(response => {
                            alert('订单状态更新成功');
                            this.refreshOrder();
                        })
                        .catch(error => {
                            console.error('更新订单状态失败:', error);
                            alert('更新订单状态失败，请重试');
                        });
                    }
                },
                
                refreshOrder() {
                    if (this.order) {
                        axios.get(`/api/orders/${this.order.orderId}`)
                        .then(response => {
                            this.order = response.data.data;
                            this.loadOrderLogs(this.order.orderId);
                        })
                        .catch(error => {
                            console.error('刷新订单失败:', error);
                        });
                    }
                },
                
                editConfig(config) {
                    // 这里简化处理，实际应用中应该使用模态框
                    if (config.sensitive) {
                        alert('敏感信息暂不支持在线编辑');
                        return;
                    }
                    
                    const newValue = prompt(`请输入新的${config.key}值:`, config.value);
                    if (newValue !== null && newValue !== config.value) {
                        const updatedConfig = { ...config, value: newValue };
                        
                        axios.put('/api/configs', updatedConfig)
                        .then(response => {
                            alert('配置更新成功');
                            this.loadApiConfigs();
                        })
                        .catch(error => {
                            console.error('更新配置失败:', error);
                            alert('更新配置失败，请重试');
                        });
                    }
                },
                
                logout() {
                    // 在实际应用中，应该调用后端注销API
                    alert('已退出登录');
                    window.location.href = '/index.html';
                },
                
                formatDate(dateString) {
                    if (!dateString) return '';
                    
                    try {
                        const date = new Date(dateString);
                        return date.toLocaleString('zh-CN', {
                            year: 'numeric',
                            month: '2-digit',
                            day: '2-digit',
                            hour: '2-digit',
                            minute: '2-digit',
                            second: '2-digit'
                        });
                    } catch (e) {
                        return dateString;
                    }
                }
            }
        });
        
        app.mount('#app');
    </script>
</body>
</html>